<template>
  <div>
    <Modal
      :styles="{top: '40px'}"
      :value="value"
      @on-cancel="handleCancelClick"
      @on-ok="handleOkClick"
      @on-visible-change="handleVisibleChange"
      loading
      title="选择工序"
      width="780"
    >
      <div class="search-form-wrapper">
        <Form :model="form" class="search-form" inline ref="searchForm">
          <div>
            <FormItem prop="htdid">
              <Select
                @on-change="handleSelectHtdChange"
                clearable
                placeholder="请选择合同段"
                v-model="form.htdid"
              >
                <Option
                  :key="item.id"
                  :value="item.id"
                  v-for="item in contractList"
                >{{item.nodeName}}</Option>
              </Select>
            </FormItem>
            <FormItem prop="dwid">
              <Select
                :disabled="disabledDwSelect"
                @on-change="handleSelectDwChange"
                clearable
                placeholder="请选择单位工程"
                v-model="form.dwid"
              >
                <Option :key="item.id" :value="item.id" v-for="item in dwList">{{item.nodeName}}</Option>
              </Select>
            </FormItem>
            <FormItem prop="fbid">
              <Select
                :disabled="disabledFbSelect"
                clearable
                placeholder="请选择分部工程"
                v-model="form.fbid"
              >
                <Option :key="item.id" :value="item.id" v-for="item in fbList">{{item.nodeName}}</Option>
              </Select>
            </FormItem>
            <br />
            <FormItem prop="fxname">
              <Input placeholder="请输入分项名称" v-model="form.fxname" />
            </FormItem>
            <FormItem prop="gxname">
              <Input placeholder="请输入工序名称" v-model="form.gxname" />
            </FormItem>
          </div>
          <FormItem class="button-group">
            <Button @click="handleSearchClick" type="primary">查询</Button>
            <Button @click="handleResetForm">重置</Button>
          </FormItem>
        </Form>
      </div>
      <Table
        :columns="tableColumns"
        :data="data"
        @on-selection-change="handleSelectChange"
        border
        ref="tableRef"
      ></Table>

      <div class="page-wrapper clearfix">
        <Page
          :current="page"
          :total="total"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
          show-sizer
          show-total
          size="small"
        />
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getWorkList,
  getWorkNamefromIds,
  getContractList,
  getDwList,
  getFbList
} from '@/api/message.js';

export default {
  model: {
    prop: 'value',
    event: 'on-visible-change'
  },
  props: {
    value: Boolean,
    workIds: String,
    flowType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      form: {
        htdid: '', // 合同段
        dwid: '', // 单位工程
        fbid: '', // 分部工程
        fxname: '', // 分项名称
        gxname: '' // 工序名称
      },
      contractList: [], // 合同段list
      dwList: [],
      fbList: [],

      tableColumns: [
        { type: 'selection', width: 55, align: 'center' },
        { title: '合同段', key: 'htdname', align: 'center' },
        { title: '单位工程', key: 'dwname', align: 'center' },
        { title: '分部工程', key: 'fbname', align: 'center' },
        { title: '分项工程', key: 'fxname', align: 'center' },
        { title: '工序名称', key: 'gxname', align: 'center' }
      ],
      data: [],

      tableSelection: [],
      total: 100,
      page: 1,
      pageSize: 10
    };
  },
  computed: {
    disabledDwSelect () {
      return !(this.dwList.length > 0);
    },
    disabledFbSelect () {
      return !(this.fbList.length > 0);
    }
  },
  watch: {
    value: {
      handler: function (val) {
        if (val) {
          this.getWorkList();
        }
      },
      immediate: true
    },
    flowType: {
      handler: function (val, oldV) {
        val && this.getWorkList(val);
      },
      immediate: true
    }
  },
  mounted () {
    // this.getWorkList();
    this.getContractList();
  },
  methods: {
    async getWorkList (val) {
      try {
        const data = {
          pageNum: this.page,
          pageSize: this.pageSize,
          // flowType: '施工检查表'
          flowType: val || this.flowType

        };
        if (this.form.htdid) {
          data.htdid = this.form.htdid;
          data.dwid = this.form.dwid;
          data.fbid = this.form.fbid;
        }
        if (this.form.dwid) {
          data.dwid = this.form.dwid;
        }
        if (this.form.fbid) {
          data.fbid = this.form.fbid;
        }
        if (this.form.fxname) {
          data.fxname = this.form.fxname;
        }
        if (this.form.gxname) {
          data.gxname = this.form.gxname;
        }

        // console.log('工序选择 req=>', data);
        const resp = await getWorkList(data);
        // console.log('工序选择 res=>', resp);
        const info = resp.data;
        const workIdsArr = this.workIds.split(',');
        this.data = info.data;
        this.total = info.total;
        this.data.forEach(item => {
          // 已经选中的不能在选
          if (item.checked) {
            item._disabled = true;
          }

          if (workIdsArr.indexOf(String(item.id)) !== -1) {
            item._disabled = false;
            item._checked = true;
          }
        });
      } catch (error) {
        console.error(error);
      }
    },
    async getContractList () {
      const resp = await getContractList();
      this.contractList = resp.data.data;
      // console.log('合同段list =>resp', resp);
    },
    handleVisibleChange (visible) {
      this.$emit('on-visible-change', visible);
    },
    handleSelectChange (selection) {
      this.tableSelection = selection;
    },
    handleResetForm () {
      this.$refs.searchForm.resetFields();
      this.getWorkList();
    },
    handleSearchClick () {
      this.getWorkList();
    },
    handlePageChange (page) {
      this.page = page;
      this.getWorkList();
    },
    handlePageSizeChange (pageSize) {
      this.pageSize = pageSize;
      this.getWorkList();
    },
    async handleOkClick () {
      const ids = this.tableSelection.map(item => {
        return item.id;
      });

      if (ids.length > 0) {
        const resp = await getWorkNamefromIds({ ids });
        const workNames = resp.data.data;
        this.$emit('on-select-success', workNames, ids);
      }

      this.$emit('on-visible-change', false);
      this.$refs.searchForm.resetFields();
    },
    async handleSelectHtdChange (id) {
      if (!id) {
        this.dwList = [];
        this.fbList = [];
        this.form.dwid = '';
        this.form.fbid = '';
        return;
      }
      const resp = await getDwList({ nodeId: id });
      // console.log('单位工程list resp=>', resp);
      this.dwList = resp.data.data;
    },
    async handleSelectDwChange (id) {
      if (!id) {
        this.fbList = [];
        this.form.fbid = '';
        return;
      }
      const resp = await getFbList({ nodeId: id });
      // console.log('分部list resp=>', resp);
      this.fbList = resp.data.data;
    },
    handleCancelClick () {
      this.$refs.searchForm.resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.search-form {
  display: flex;
  justify-content: space-between;
  /deep/ .ivu-input {
    width: 130px;
  }
  .ivu-select {
    width: 130px;
  }
  .ivu-btn:first-child {
    margin-right: 10px;
  }
}
/deep/ .ivu-table td {
  height: 40px;
}
/deep/ .ivu-modal-body {
  padding-bottom: 5px;
}
.ivu-form-item {
  margin-bottom: 10px;
}
.page-wrapper {
  .ivu-page {
    float: right;
    margin: 10px 0;
  }
}
.button-group {
  display: flex;
  align-items: flex-end;
}
</style>
